<template>
  <view>
    <view class="major-infor" v-for="item in jdata" :key="item.id">
        <view class="btn-area consult-btn" @click="open({
								type:'counselor',
								msg:'向他咨询',
								title:'向他咨询',
								item:item
							})">
            <button class="btn btn-phone click_open_layer">免费咨询</button>
        </view>

        <view class="face" @click="goToCou(item.id)">
            <img :src="item.image" :alt="item.name"/>
            <view class="best_remark">
                <span class="best_remark2 m-icon-bg1"></span>
            </view>
        </view>

        <view class="text" @click="goToCou(item.id)">
            <view class="cmt-name">
				<b>{{item.name}}</b>
				<span>{{item.type_arr[0]}}</span>
            </view>
            <view class="cmt-tit">
                <p>累计服务客户<span>{{item.clients}}</span>人</p>
            </view>
        </view>
    </view>
	<uni-popup ref="popup" type="center">
	    <view class="pop-content">
	        <view class="pop-zxs-intr-v3">
	            <view @click="close()" class="pop-shut"></view>
	            <view class="pop-zxs-pic">
	                <img :src="pop_three.image" :alt="pop_three.name">
	            </view>
	            <view class="pop-zxs-txt">
	                <h5>{{pop_three.name}}</h5>
	                <p>已为<span>{{pop_three.clients}}</span>人解答过问题</p>
	            </view>
	            <view class="pop-text">
	                <p class="pop-text-p1">买房政策、房源信息、楼盘分析</p>
	                <p>有问题，他将在第一时间为您解答！ </p>
	            </view>
	             <view class="pop-phone">
	                <input @input="onKeyInput2" :value="mobile" type="pop-text" placeholder="请输入订阅手机号" >
	            </view>
	            <button class="pop-btn-area"  @click="expert">确定</button>
	        </view>
	    </view>   
	</uni-popup> 
  </view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	
export default {
	components: {
		uniPopup,
		uniPopupMessage,
		uniPopupDialog
	},
  data() {
    return {
		pop_three:{},//弹窗3
		mobile:''
	};
  },
  props: {
  	jdata:{
  		// type: Array,
  		required: true,
  	}
  },
  methods: {
	  goToCou(id){
		this.$common.navigateTo("/pages/index/detail/Detail?id="+id);
	  },
	  
	  open(data){
	  		  this.pop_three = data.item;
	  		  this.param ={
	  		  	'type': data.type,
	  		  	'msg': data.msg,
	  		  };
	      this.$refs.popup.open()
	  },
	  close(){
	       this.$refs.popup.close()
	  },
	  
	  close1(){
	      this.$refs.message.close()
	  },
	  expert(){
	  	//提交
	  	let _this = this;
	  	let mobile = this.mobile;
	  	if(mobile == ''){
	  		uni.showToast({
	  		    title: '手机号码不能为空',
	  		    duration: 2000,
	  			icon:'none'
	  		});
	  		return false;
	  	}
	  	
	  	var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
	  	if (!myreg.test(mobile)) {
	  		uni.showToast({
	  		    title: '请输入正确的手机号',
	  		    duration: 2000,
	  			icon:'none'
	  		});
	  		return false;
	  	}
	  	this.param.mobile = mobile;
	  	// this.param.loupan_res = this.info;
	  		this.param.counselor_id = this.pop_three.id;
	  	this.$api.pushAjaxSubmit({
	  			param:_this.param
	  		},
	  		res => {
	  				if(res.code == 1){
	  					uni.showToast({
	  					    title: res.msg,
	  					    duration: 2000
	  					});
	  				}else{
	  					uni.showToast({
	  					    title: res.msg,
	  					    duration: 2000,
	  						icon:'none'
	  					});
	  				}
	  			_this.$refs.popup.close()
	  		}
	  	);
	  },
  },
};
</script>

<style scoped>
    .major-infor{
        padding-bottom: 56upx;
    }
    .btn-area{
        float: right;
    }
    .btn{
        width: 154upx;
        height: 56upx;
        background: #13c3c3;
        color: #fff;
        font-size: 24upx;
        border-radius: 10upx;
    }

    .face{
        height: 80upx;
        width: 80upx;
        float: left;
    }
    .face>img{
        height: 100%;
        width: 100%;
        border-radius: 50%;
    }
    .text{
        margin-left: 100upx;
    }
    .cmt-name>b{
        color: #3e4a59;
    }
   .cmt-name>span{
       padding: 5upx 10upx;
       color: #13c3c3;
       background: #e3f6fe;
       font-size: 24rpx;
       border-radius: 5upx;
       margin-left: 20upx;
   }
   .cmt-tit>p{
       color: #77808a;
       font-size: 24upx;
       margin-top: 8upx;
   }
   .cmt-tit>p>span{
        color: #fa5f35;
        margin: 0 5upx 0 5upx;
   }
   
   /* pop three */
   	.pop-shut{
           height: 32upx;
           width: 32upx;
           position: relative;
           top:-30upx;
           left: 560upx;
           background: url("../../../static/img00/shut.png") no-repeat;
           background-size: 100% 100%;
       }
   	.pop-content{  
			z-index: 100;
           background: #fff;
           border-radius: 10upx;
           display: flex;
       } 
   
       .pop-zxs-intr-v3{
           padding: 50upx 60upx 50upx 60upx;
           margin: 0 auto;
   
       }
       .pop-zxs-pic{
           height: 120upx;
           width: 120upx;  
           float: left;
       }
       .pop-zxs-pic>img{
           height: 100%;
           width: 100%;
           border-radius: 50%;
       }
   
       .pop-zxs-txt{
           height: 120upx;
           margin-left: 140upx;
           line-height: 60upx;
          
       }
       .pop-zxs-txt>h5{
           font-size: 32upx;
       }
       .zxs-txt>p{
           font-size: 28upx;
           color: #77808a;
       }
       .pop-zxs-txt>p>span{
           color: #13c3c3;
       }
       .pop-text{
           margin-top: 50upx;
           margin-bottom: 80upx;
       }
       .pop-text>p{
           width: 500upx;
           overflow: hidden;
           text-overflow:ellipsis;
           white-space: nowrap;
       }
       .pop-text-p1{
           margin-left: 20upx;
           margin-right: 40upx;
       }
       .pop-phone{
           border: 1upx solid #cdd7e1;
           border-radius: 10upx;
       }
       .pop-phone>input{
           padding: 0 30upx;
   		border: 1px solid #E3E3E3;
       }
       input{
           height: 86upx;
       }
   	.pop-btn-area{
           margin-top: 80upx;
           margin-bottom: 30upx;
           background: #13c3c3;
           color: #fff;
       }
   	.pop-expert2-popup{
           width: 510upx;
           height: 240upx;
           background: #fff;
           border-radius: 10upx;
       }
       .pop-expert2-popup-p{
           height: 150upx;
           text-align: center;
           font-size: 28uxp;
           color: #3e4a59;
           line-height: 150upx;
           border-bottom: 1upx solid rgb(195, 195, 195);
       }
       .pop-expert2-popup-shut{
           text-align: center;
           line-height: 90upx;
           color: #47b3e3;
       } 
   /* php three end */
   
   
</style>
